<template>
    <div class="comp-paths">
        <div class="path" v-for="(path, index) in paths" :key="index" @click="onClickPath(path)">{{ $router.title(path) }}</div>
        <div>
            <el-button type="primary" size="small" plain @click="historyGo(-1)">返回</el-button>
        </div>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int } from "../util";
    export default {
        name: "comp-paths",
        mixins: [mixin],
        props: {
            paths: { type: Array, default: () => [] },
        },
        data: () => ({}),
        methods: {
            onClickPath(path) {
                this.$router.replace(path);
            },
            historyGo( index){
                window.history.go(index)
            }
        },
    };
</script>

<style lang="scss">
    .comp-paths {
        display: flex;
        align-items: center;
        overflow: hidden;

        & > .path {
            margin-right: 35px;
            padding: 3px 0;
            height: 14px;
            color: #333;
            font-size: 14px;
            line-height: 1;
            user-select: none;
            cursor: pointer;

            &:after {
                position: absolute;
                top: 2px;
                right: -21px;
                pointer-events: none;
                content: "/";
            }

            &:last-child {
                color: #999;

                &:after {
                    display: none;
                }
            }
        }
    }
</style>
